<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link th:href="@{css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{css/bootstrap-table.min.css}" rel="stylesheet">
    <title>Title</title>
</head>
<body>

<div class="panel-body" style="padding-bottom:0px;">
    <div id="toolbar" class="btn-group">
        <button id="btn_add" type="button" class="btn btn-default" data-toggle="modal" data-target="#addModal">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
        </button>
        <button id="btn_update" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑
        </button>
        <button id="btn_delete" type="button" class="btn btn-default" onclick="BtchDeleteBook()">
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
        </button>
    </div>

    <!-- <button type="button" id="download" style="margin-left:50px" id="btn_download" class="btn btn-primary" onClick ="$('#myTable').tableExport({ type: 'excel', escape: 'false' })">数据导出</button> -->
    <table id="myTable">

    </table>

    <!-- 添加 -->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">添加记录</h4>
                </div>
                <div class="modal-body">
                    <form role="form" action="javascript:void(0)" id="addForm">
                        <div class="form-group">
                            <input type="text" class="form-control" name="goodsName" placeholder="请输入商品名称">
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" name="goodsPrice" placeholder="请输入商品价格">
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" name="goodsType" placeholder="请输入商品型号">
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" name="statusId" placeholder="请输入商品状态">
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" name="goodsStore" placeholder="请输入商品数量">
                        </div>

                    </form>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="addRecord">提交</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Mainly scripts -->
<script th:src="@{/js/jquery-3.4.1.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/bootstrap-table.min.js}"></script>

<script type="text/javascript">

    $(function () {
        var itable = TableInit();//.初始化Table
        itable.Init();

    });
    var TableInit = function () {
        var myTableInit = new Object();
        //.初始化Table
        myTableInit.Init = function () {
            $("#myTable").bootstrapTable({
                url: '../goodsController/findgoods.do',
                method: 'get',
                toolbar: '#toolbar',//工具列
                striped: true,//隔行换色
                cache: false,//禁用缓存
                pagination: true,//关闭分页
                showFooter: false,//是否显示列脚
                showPaginationSwitch: true,//是否显示 数据条数选择框
                sortable: false,//排序
                search: true,//启用搜索
                showFullscreen: true,//全屏按钮
                /* showToggle:true,//显示详细视图和列表 */
                showColumns: true,//是否显示 内容列下拉框
                showRefresh: true,//显示刷新按钮
                clickToSelect: true,//点击选中checkbox
                pageNumber: 1,//初始化加载第一页，默认第一页
                pageSize: 3,   //每页的记录行数
                pageList: [1, 2, 3, 4, 5],//可选择的每页行数
                paginationPreText: "上一页",
                paginationNextText: "下一页",
                paginationFirstText: "First",
                paginationLastText: "Last",
                showExport: true,  //是否显示导出按钮  
                buttonsAlign: "right",  //按钮位置
                exportTypes: ['excel', 'json', 'txt', 'csv', 'xml'],  //导出文件类型
                Icons: 'glyphicon-export',
                columns: [{
                    title: "全选", field: "select", checkbox: true
                }, {
                    field: 'goodsId',
                    title: '商品id',
                    switchable: true
                },
                    {
                        field: 'goodsName',
                        title: '商品名称',
                        switchable: true
                    }, {
                        field: 'goodsPrice',
                        title: '商品价格',
                        switchable: true
                    }, {
                        field: 'goodsType',
                        title: '商品型号',
                        switchable: true
                    }, {
                        field: 'goodsStore',
                        title: '商品数量',
                        switchable: true,
                        sortable: true
                    }, {
                        field: 'statusName',
                        title: '商品状态',
                        switchable: true
                    },],

            });
        };

        return myTableInit;
    };
    //添加数据
    $("#addRecord").click(function () {
        var adddata = $("#addForm").serialize();
        $.ajax({
            url: "../goodsController/addgoods.do",
            dataType: "text",
            type: "post",
            data: adddata,
            success: function (data) {
                if (data == "ok") {
                    $('#addModal').modal('hide');
                    $('#myTable').bootstrapTable('refresh');
                    alert("添加成功");
                } else {
                    alert("添加失败");
                }
            },
            error: function (data) {
                alert("错误");
            }
        });
    });

    //删除
    function BtchDeleteBook() {
        var rows = $("#myTable").bootstrapTable('getSelections');
        if (rows.length == 0) {
            alert("请选择删除的数据");
            return;
        }
        var ids = '';
        for (var i = 0; i < rows.length; i++) {
            ids += rows[i]['goodsId'] + ",";

        }
        ;
        ids = ids.substring(0, ids.length - 1);
        var msg = "你确定要删除选中数据吗";
        if (confirm(msg) == true) {

            $.ajax({
                url: "../goodsController/detegoods.do",
                type: "post",
                data: {ids: ids},
                success: function (data) {
                    alert("已删除");
                    $("#myTable").bootstrapTable('refresh');
                },
                error: function (data) {
                    alert("错误");
                }
            });
        }
    }
</script>

</body>
</html>